<!-- 车间维度统计 -->
<template>
  <div class="iBox">
    <table>
      <thead>
        <tr>
          <td>车间</td>
          <td>电量(KWH)</td>
          <td>柴油(L)</td>
          <td>天然气(m³)</td>
          <td>CO2(m³)</td>
          <td>O2(m³)</td>
          <td>压缩空气量(m³)</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in state.source">
          <td>{{ item.room }}</td>
          <td>{{ item.power || "-" }}</td>
          <td>{{ item.oil || "-" }}</td>
          <td>{{ item.gas || "-" }}</td>
          <td>{{ item.co2 || "-" }}</td>
          <td>{{ item.o2 || "-" }}</td>
          <td>{{ item.air || "-" }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script setup>
import { getCurrentInstance, reactive, watch, toRaw } from "vue";
import _ from "lodash";
import { exportTable } from "@/utils/exportExcel";

const { proxy } = getCurrentInstance();
const props = defineProps(["repair"]);
const state = reactive({
  source: [],
});

watch(
  () => props.repair,
  (repair) => {
    if (repair) {
      proxy.$axios
        .get("/workflow/stat/second", { params: { repairId: repair.repairId } })
        .then(({ success, data }) => {
          if (success) {
            const source = _.map(data, (o) => ({
              room: o.room,
              power: o.power?.toFixed(4),
              oil: o.oil?.toFixed(4),
              gas: o.gas?.toFixed(4),
              co2: o.co2?.toFixed(4),
              o2: o.o2?.toFixed(4),
              air: o.air?.toFixed(4),
            }));
            state.source = source;
          }
        });
    }
  },
  { immediate: true, deep: true }
);

const _exportExcel = () => {
  const rows = _.map(toRaw(state.source), (o) => {
    return [o.room, o.power, o.oil, o.gas, o.co2, o.o2, o.air];
  });

  exportTable(
    "单船工序",
    [
      { name: "车间", key: "room" },
      { name: "电量(KWH)", key: "power" },
      { name: "柴油(L)", key: "oil" },
      { name: "天然气(m³)", key: "gas" },
      { name: "CO2(m³)", key: "co2" },
      { name: "O2(m³)", key: "o2" },
      { name: "压缩空气量(m³)", key: "air" },
    ],
    rows,
    "单船工序"
  );
};

defineExpose({ exportExcel: _exportExcel });
</script>
<style lang="less" scoped>
.iBox {
  width: 100%;
  height: 100%;

  table {
    width: 100%;
    border: 1px solid #f8f8f8;
  }

  th,
  td {
    text-align: center;
    border: 1px solid #f8f8f8;
    padding: 4px;
  }
}
</style>
